<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%--
  Created by IntelliJ IDEA.
  User: lxf
  Date: 2016/7/5
  Time: 11:50
  To change this template use File | Settings | File Templates.
--%>
<html>
<head>
    <title>用户管理</title>
</head>
<body>
<div id="userContent">
    <button class="btn btn-default" @click="findUserList">
        <span class="glyphicon glyphicon-search" aria-hidden="true"></span>所有用户
    </button>
    <button class="btn btn-default" @click="addUserMethod">
        <span class="glyphicon glyphicon-search" aria-hidden="true"></span>添加用户
    </button>
    <table class="table table-hover">
        <thead>
        <th width="20%">用户帐号</th>
        <th width="20%">用户昵称</th>
        <th width="20%">操作</th>
        </thead>
        <tbody>
        <tr v-for="user in users">
            <td>{{user.username}}</td>
            <td>{{user.nickname}}</td>
            <td>
                <a href="javascript:" @click="modifyUserMethod(user)">修改</a>&nbsp;
                <a href="javascript:" @click="delUserMethod(user)">删除</a></td>
        </tr>
        </tbody>
    </table>

</div>

<div>
    <input type="hidden" id="totalPage">
    <input type="hidden" id="currentPage">
    <ul id="pager"></ul>
</div>
<div class="modal fade" id="delUserModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="resetPwd_title">删除用户</h4>
            </div>
            <div class="modal-body">
                确定要删除该用户?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="delUser()">
                    <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>确定
                </button>
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>取消
                </button>
            </div>
        </div>
    </div>
</div>
<myScript>
    <script>
        var userPojo;
        var userModel = new Vue({
            el: '#userContent',
            data: {
                users: []
            },
            methods: {
                findUserList: function () {
                    $this = this;
                    $.ajax({
                        url: '/back/user/list/1',
                        type: 'get',
                        success: function (data) {
                            $this.users = data.userDTOs;
                            pageHandle(data.currentPage, data.totalPage);
                        }
                    })
                },
                addUserMethod: function () {
                    location.href = "/back/user/form";
                },
                modifyUserMethod: function (user) {
                    location.href = "/back/user/form/" + user.guid;
                },
                delUserMethod: function (user) {
                    userPojo = user;
                    $('#delUserModel').modal('toggle');
                },
                initPageInput: function (currentPage, totalPage) {
                    $('#currentPage').val(currentPage);
                    $('#totalPage').val(totalPage);
                }
            }
        });

        function pageHandle(currentPage, totalPage) {
            var options = {
                bootstrapMajorVersion: 3,
                currentPage: currentPage,
                totalPages: totalPage,
                size: "normal",
                alignment: "center",
                itemTexts: function (type, page, current) {
                    switch (type) {
                        case "first":
                            return "首页";
                        case "prev":
                            return "上一页";
                        case "next":
                            return "下一页";
                        case "last":
                            return "末页";
                        case "page":
                            return page;
                    }
                },
                onPageClicked: function (e, originalEvent, type, page) {
                    $.ajax({
                        url: '/back/user/list/' + page,
                        type: 'get',
                        success: function (data) {
                            userModel.roles = data.userDTOs;
                            pageHandle(data.currentPage, data.totalPage);
                            userModel.initPageInput(data.currentPage, data.totalPage);
                        }
                    })
                }
            }
            $("#pager").bootstrapPaginator(options);
        }

    </script>
</myScript>
</body>
</html>
